window.addEventListener('load', function() {
  let total = this.document.querySelector('.total')
  let avgSalary = this.document.querySelector('.avgSalary')
  let avgAge = this.document.querySelector('.avgAge')
  let proportion = this.document.querySelector('.proportion')
  // 获取所有学员信息
  axios({
    url: '/student/list'
  }).then(res => {
    console.log(res)
    // let pieArr = [{ value: 1, name: '广东省' }, { value: 2, name: '湖南省' }]
    let pieArr = [], // 饼图数据
      names = [], // 折线图数据 --所有姓名
      salarys = [], // 折线图数据 --所有期望薪资
      truesalarys = [], // 折线图数据 --所有实际薪资
      chinaGeoCoordMap = {}, //地图数据 经纬度
      chinaDatas = [] // 地图数据- 省份人数

    // 从后台响应数据中提取出饼图所需要的数据
    res.data.data.forEach(function(value, index) {
      // 我自动知道pieArr中已经存在这个省份所对应的数据了？
      // 我们应该去遍历 pieArr,判断里面是否有数据对象的name 等于  value.province,如果有，就修改这个对象的value属性
      // --------------饼图数据的收集开始----------------
      let temp = pieArr.filter(v => {
        return v.name === value.province
      })[0]

      if (temp) {
        // 将这个省份对应的数量 + 1
        temp.value += 1
      } else {
        // 如果不存在，则添加一个新的记录，且数量为1
        pieArr.push({ value: 1, name: value.province })
      }
      // --------------饼图数据的收集结束----------------
      // --------------折线图数据的收集开始----------------
      names.push(value.name)
      salarys.push(value.salary)
      truesalarys.push(value.truesalary)
      // --------------折线图数据的收集结束----------------
      // --------------地图数据的收集开始----------------
      chinaGeoCoordMap[value.province] = [value.jing, value.wei]
      // chinaDatas.push([{ name: value.province, value: 0 }])
      chinaDatas = pieArr.map(v => {
        return [v]
      })
      // --------------地图数据的收集结束----------------
    })
    // 根据数据生成饼图
    createPie(pieArr)
    // 根据数据生成折线图
    createLine(names, salarys, truesalarys)
    // 根据数据生成地图
    mapChart(chinaGeoCoordMap, chinaDatas)
  })

  // 班级概览
  axios({
    url: '/student/overview'
  }).then(res => {
    total.innerHTML = res.data.data.total
    avgSalary.innerHTML = res.data.data.avgSalary
    avgAge.innerHTML = res.data.data.avgAge
    proportion.innerHTML = res.data.data.proportion
  })

  // 获取每一次的成绩
  function getScore(batch) {
    axios({
      url: `/score/batch?batch=${batch}`
    }).then(res => {
      console.log(res)
      createBar(res.data.data)
    })
  }
  getScore(3)

  // 1.生成饼图
  function createPie(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.pie'))

    // 指定图表的配置项和数据
    var option = {
      // 标题
      title: {
        text: '籍贯 HomeTown', // 主标题
        left: 'left' // 对齐方式
      },
      // 工具提示：鼠标进入会出现 一个提示面板
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)' // 提示信息的格式
      },
      // 数据系列
      series: [
        {
          name: '各地人员分布', // 图表标题
          type: 'pie', // 图表类型
          radius: [20, 110], // 半径，用于设置图表的大小
          center: ['50%', '50%'], // 图表的对齐方式
          roseType: 'area',
          itemStyle: {
            borderRadius: 8 // 圆角
          },
          data
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

  // 2.生成折线图
  // names:所有姓名
  // salarys：所有期望薪资
  // truesalarys：所有的实际薪资
  function createLine(names, salarys, truesalarys) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.line'))
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '薪资 Salary'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['期望薪资', '实际薪资']
      },
      dataZoom: [
        {
          start: 0,
          end: 100
        }
      ],
      grid: {
        left: '3%',
        right: '4%',
        bottom: '20%',
        top: '15%',
        // 大小是否包含标签刻度
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: names
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '期望薪资',
          data: salarys,
          type: 'line',
          smooth: true,
          symbol: 'none',
          // 设置当前系列的线的颜色
          lineStyle: {
            color: 'red',
            width: 2
          }
        },
        {
          name: '实际薪资',
          data: truesalarys,
          type: 'line',
          smooth: true,
          symbol: 'none', // 去掉线上面那个空心的小圆点
          lineStyle: {
            color: 'blue',
            width: 2
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

  //3.生成柱状的图
  function createBar(data) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('.barChart'))
    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      barWidth: 15,
      grid: {
        left: '3%',
        right: '4%',
        bottom: '5%',
        top: '10%',
        // 大小是否包含标签刻度
        containLabel: true
      },
      legend: {
        data: ['平均分', '低于60分人数', '60-80分之间', '高于80分人数']
      },
      xAxis: [
        {
          type: 'category',
          data: data.group,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 100,
          interval: 10,
          axisLabel: {
            formatter: '{value} 分'
          }
        },
        {
          type: 'value',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value} 人'
          }
        }
      ],
      series: [
        {
          name: '平均分',
          type: 'bar',
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 分'
            }
          },
          data: data.avgScore
        },
        {
          name: '低于60分人数',
          type: 'bar',
          // 让当前数据对应着右侧的Y轴
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 人'
            }
          },
          data: data.lt60
        },
        {
          name: '60-80分之间',
          type: 'bar',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 人'
            }
          },
          data: data.gt60
        },
        {
          name: '高于80分人数',
          type: 'bar',
          yAxisIndex: 1,
          tooltip: {
            valueFormatter: function(value) {
              return value + ' 人'
            }
          },
          data: data.gt80
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

  // 4.实现按次查询成绩
  let btn = document.querySelector('.btn')
  let batch = document.querySelector('#batch')
  let lis = batch.querySelectorAll('li')

  btn.addEventListener('click', function() {
    if (batch.style.display == 'block') {
      batch.style.display = 'none'
    } else {
      batch.style.display = 'block'
    }
  })
  lis.forEach(function(ele, index) {
    ele.addEventListener('click', function() {
      getScore(index + 1)
    })
  })

  // ----------------------- 地图 ------------------------------
  function mapChart(chinaGeoCoordMap, chinaDatas) {
    let myChart = echarts.init(document.querySelector('.map'))

    var convertData = function(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]
        var fromCoord = chinaGeoCoordMap[dataItem[0].name]
        var toCoord = [113.434363, 23.135539]
        if (fromCoord && toCoord) {
          res.push([
            {
              coord: fromCoord,
              value: dataItem[0].value
            },
            {
              coord: toCoord
            }
          ])
        }
      }
      return res
    }
    var series = []
    ;[['广东省', chinaDatas]].forEach(function(item, i) {
      console.log(item)
      series.push(
        {
          type: 'lines',
          color: '#00f',
          zlevel: 2,
          effect: {
            show: true,
            period: 4, //箭头指向速度，值越小速度越快
            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            symbol: 'arrow', //箭头图标
            symbolSize: 5 //图标大小
          },
          lineStyle: {
            normal: {
              width: 1, //尾迹线条宽度
              opacity: 0.4, //尾迹线条透明度
              curveness: 0.3 //尾迹线条曲直度
            }
          },
          data: convertData(item[1])
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4, //波纹圆环最大限制，值越大波纹越大
            color: 'blue'
          },
          label: {
            normal: {
              show: true,
              position: 'right', //显示位置
              offset: [5, 0], //偏移设置
              formatter: function(params) {
                //圆环显示文字
                return params.data.name
              },
              fontSize: 13
            },
            emphasis: {
              show: true
            }
          },
          symbol: 'circle',
          symbolSize: function(val) {
            return 5 + val[2] * 0.5 //圆环大小
          },
          itemStyle: {
            normal: {
              show: false,
              color: '#ff0'
            }
          },
          data: item[1].map(function(dataItem) {
            return {
              name: dataItem[0].name,
              value: chinaGeoCoordMap[dataItem[0].name].concat([
                dataItem[0].value
              ])
            }
          })
        },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: '#0f0'
              }
            },
            emphasis: {
              show: true,
              color: '#f60'
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [
            {
              name: item[0],
              value: chinaGeoCoordMap[item[0]].concat([10])
            }
          ]
        }
      )
    })

    //
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: '来粤路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function(params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = ''
          var name = params.name
          var value = params.value[params.seriesIndex + 1]
          res =
            "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value
          return res
        }
      },
      backgroundColor: '#fff',
      visualMap: {
        // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    }

    myChart.setOption(option)
  }

  mapChart()
})
